<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="uploadForm">

                        <input type="text" name="name" id="name">
                        <!-- 定义好图片的 标签 -->
                        <input type="file" id="myFile" name="myFile">
                        <button type="button" onclick="submitMyPhoto()">上传图片</button>
                    </form>
                    <div>
                        <img src="" alt="" id="myPhoto">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
</body>
<script>
    function submitMyPhoto(){
        // h5提供的js对象  可以让我们把表单数据 ajax 提交给后台  包含文件
        var formData = new FormData();

        //添加 页面上  你所选的文件
        formData.append("myFile",$('#myFile')[0].files[0]);//参数  myFile   file对象
        formData.append("name",$('#name').val())
        debugger;
        $.ajax({
            url : "/sys/user/photo",
            type : 'POST',
            data : formData,
            // 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false, //必须
            success : function(responseStr) {
                // src 请求后台图片地址  实现图片回显
                $('#myPhoto').attr("src","/sys/user/image/"+responseStr.msg);
            }
        });
    }
</script>
</html>